<template>
	<view class="w-flex-col page">
		<view class="w-flex-col section space-y-24">
			<image src="/static/home/bg.png" mode="" class="img"></image>
			<view class="w-flex-col w-items-start group space-y-6">
				<text class="font_1">微信扫一扫</text><p><text class="font_1">免密连接WIFI</text></p>
				<text class="font_1 font_2">一键连接 无需告诉密码 安全防止蹭网</text>
			</view>
		</view>
		<view class="w-flex-row w-justify-around group_2">
			<view class="w-flex-col w-justify-start w-items-center text-wrapper" @tap="goCreate">
				<image src="/static/home/wifi.png" mode=""></image>
				<text class="font_3 text_2">创 建</text>
			</view>
			<view class="w-flex-col w-justify-start w-items-center text-wrapper_2" @tap="goWifi">
				<image src="/static/home/me.png" mode=""></image>
				<text class="font_3 text_3">管理</text>
			</view>
		</view>
		<text class="w-self-start font_4 text_4">特色功能</text>
		<view class="w-flex-row w-justify-center w-items-center group_3 space-x-14">
			<image class="image" src="/static/home/58e2069029e99ff4158da36fc750df1a.png" />
			<view class="w-flex-col w-items-start group_4 space-y-30">
				<text class="font_4">扫码连接</text>
				<text class="font_2">无需输入密码，扫码即连接</text>
			</view>
		</view>
		<!-- <view class="w-flex-row w-justify-center w-items-center group_5 space-x-16">
			<image class="image_2" src="/static/home/108061f85c3b1f270568c7b71a209049.png" />
			<view class="w-flex-col w-items-start space-y-30">
				<text class="font_4 text_5">广告分成</text>
				<text class="font_2">有用户扫码连接，就能生成广告收益</text>
			</view>
		</view>
		<view class="w-flex-row w-justify-center group_6 space-x-24">
			<image class="w-self-start image_3" src="/static/home/af38fd23e89637436ffb2f10ee564ef7.png" />
			<view class="w-flex-col w-items-start space-y-28">
				<text class="font_4">当日结算</text>
				<text class="font_2 text_6">每天会生成前一天的广告收益</text>
			</view>
		</view> -->
	</view>
</template>

<script>
	export default {
		components: {},
		data() {
			return {
				next:true
			};
		},
		onShareAppMessage(res) {
			 // console.log(this.shareGood)
			return {
				title: 'WIFI安全一键连',
				path: '/pages/home/home',
				imageUrl: ''
			}
		},
		onShareTimeline(res) {
			return {
				title: 'WIFI安全一键连',
				path: '/pages/home/home',
				imageUrl: ''
			}
		},
		methods: {
			goWifi(){
				uni.navigateTo({
					url:"/pages/my_wifi/my_wifi"
				})
			},
			goCreate(){
				console.log('广告数据加载成功');
				return uni.navigateTo({
					url:"/pages/create/create"
				})
			},
		},
	};
</script>

<style scoped lang="scss">
	.page {
		padding-bottom: 408.73rpx;
		background-color: #ffffff;
		width: 100%;
		overflow-y: hidden;
		height: auto;
		
		.section {
			height: 500rpx;
			width: 100%;
			.img{
				width: 100%;
				height: 100%;
			}
			.group {
				padding: 0 3.97rpx;

				.font_1 {
					font-size: 36rpx;
					font-family: SourceHanSansCN;
					line-height: 57.54rpx;
					color: #ffffff;
					
				}
				.font_2{
					padding-top: 30rpx;
					font-size: 28rpx;
				}
			}

			.space-y-6 {
				position: absolute;
				margin-top: 100px !important;
				margin-left: 50rpx;

				&>view:not(:first-child),
				&>text:not(:first-child),
				&>image:not(:first-child) {
					margin-top: 11.9rpx;
				}
			}

			.text {
				color: #ffffff;
				line-height: 25.79rpx;
			}
		}

		.space-y-24 {

			&>view:not(:first-child),
			&>text:not(:first-child),
			&>image:not(:first-child) {
				margin-top: 47.62rpx;
			}
		}

		.group_2 {
			margin-top: 0rpx;

			.text-wrapper {
				padding: 35.71rpx 0;
				background: radial-gradient(circle, #22b14C, #22b14C); 
				width: 300rpx;
				height: 100rpx;
				margin-top: 50rpx;
				border-radius: 15rpx;
				
				image{
					width: 80rpx;
					height: 80rpx;
					position: relative;
					left: -80rpx;
					top: -20rpx;
				}

				.text_2 {
					line-height: 40rpx;
					position: absolute;
				}
			}

			.text-wrapper_2 {
				padding: 35.71rpx 0;
				background: radial-gradient(circle, #22b14C, #22b14C); 
				width: 300rpx;
				height: 100rpx;
				margin-top: 50rpx;
				border-radius: 15rpx;
				
				image{
					width: 60rpx;
					height: 60rpx;
					position: relative;
					left: -80rpx;
					top: -13rpx;
				}
				
				.text_3 {
					line-height:40rpx;
					position: absolute;
				}
			}

			.font_3 {
				font-size: 28rpx;
				font-family: SourceHanSansCN;
				color: #ffffff;
				margin-left: 80rpx;
			}
		}

		.font_4 {
			font-size: 28rpx;
			font-family: SourceHanSansCN;
			line-height: 32.74rpx;
			color: #000000;
		}

		.text_4 {
			margin-left: 50rpx;
			margin-top: 50rpx;
			color: #22b14C;
		}

		.group_3 {
			margin-top: 63.49rpx;
			padding: 0 111.11rpx;

			.image {
				width: 80rpx;
				height: 80rpx;
				position: relative;
				left: -17rpx;
			}

			.group_4 {
				width: 419.64rpx;
			}
		}

		.space-x-14 {
			margin-left: -45rpx;
			&>view:not(:first-child),
			&>text:not(:first-child),
			&>image:not(:first-child) {
				margin-left: 27.78rpx;
			}
		}

		.font_2 {
			font-size: 28rpx;
			font-family: SourceHanSansCN;
			line-height: 26.79rpx;
			color: #000000;
		}

		.group_5 {
			margin-top: 67.46rpx;
			padding-left: 31.75rpx;

			.image_2 {
				width: 80rpx;
				height: 80rpx;
				position: relative;
				left: -17rpx;
			}
		}

		.space-x-16 {
			margin-left: -50rpx;
			&>view:not(:first-child),
			&>text:not(:first-child),
			&>image:not(:first-child) {
				margin-left: 31.75rpx;
			}
		}

		.space-y-30 {

			&>view:not(:first-child),
			&>text:not(:first-child),
			&>image:not(:first-child) {
				margin-top: 59.52rpx;
			}

			.text_5 {
				line-height: 33.73rpx;
			}
		}

		.group_6 {
			margin-top: 75.4rpx;
			padding: 0 119.05rpx;

			.image_3 {
				width: 80rpx;
				height: 80rpx;
				margin-top: 15rpx;
			}

			.space-y-28 {

				&>view:not(:first-child),
				&>text:not(:first-child),
				&>image:not(:first-child) {
					margin-top: 55.56rpx;
				}

				.text_6 {
					line-height: 25.79rpx;
				}
			}
		}

		.space-x-24 {
			margin-left: -118rpx;
			&>view:not(:first-child),
			&>text:not(:first-child),
			&>image:not(:first-child) {
				margin-left: 47.62rpx;
			}
		}
	}
</style>